{{Template:SZPT-CHINA/head}}
<html>
<meta name="viewport" content="width=4800" />

<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>

<script>
  if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {

    //alert(navigator.userAgent);


  } else if (/(Mac)/i.test(navigator.userAgent)) {

   // alert(navigator.userAgent);


  } else {


    //alert(navigator.userAgent);

  };

  if (/(iPhone|iOS|Android|Windows Phone)/i.test(navigator.userAgent)) {

    //alert(navigator.userAgent);
  }
</script>
<script>

  /(iPhone|iPad|iPhone OS|Phone|iPod|iOS|Mac|Android)/i.test(navigator.userAgent) && (head = document.getElementsByTagName("head"), viewport = document.createElement("meta"), viewport.name = "viewport", viewport.content = "target-densitydpi=device-dpi, width=80px, user-scalable=no", head.length > 0 && head[head.length - 1].appendChild(viewport));
</script>
<script>

  $(document).ready(function () {

    var stimer = null;
    backTopObj = document.getElementById("backTop");
    backTopObj.onclick = function () {
      //alert("1")
      cancelAnimationFrame(stimer);
      stimer = requestAnimationFrame(function fn() {
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if (oTop > 0) {
          document.body.scrollTop = document.documentElement.scrollTop = oTop - 70;
          stimer = requestAnimationFrame(fn);
        } else {
          cancelAnimationFrame(stimer);
        }
      });
    }

    // 监听滚动停止
    let t1 = 0;
    let t2 = 0;
    let timer = null; // 定时器

    var p = 0,
      t = 0;

    //console.log('body:' + $(document.body).height())
    //console.log('windos:' + $(window).height())
    $(window).scroll(function () {


      //console.log('距离:' + $(document).scrollTop())
      p = $(this).scrollTop();
      if (t < p) {
        console.log('下' + p)
        //下滚
      } else {
        // console.log('上' + p)
        //上滚            
      }
      //console.log("p:" + p)

      if (p > 440) {
        p = p - 400;
        setTimeout(function () { t = p; }, 0)
        scrollTop = p
        t1 = $(window).scrollTop()
        var value = document.getElementById('progressstatic').getAttribute("style");
        value = value.match(/margin-top: (\S*)px/)[1];
        //console.log("px:" + value);
        var top = parseInt(parseFloat(0) + 0.81 * parseFloat(scrollTop))
        //console.log("top:" + top)
        document.getElementById('progressstatic').setAttribute("style", "z-index: 999;position: absolute;margin-left: 1450px;margin-top: " + top + "px;");
        document.getElementById('progressstatic').setAttribute("src", "https://2021.igem.org/wiki/images/1/1d/T--SZPT-CHINA--progressGIF.gif");
        timer = setTimeout(isScrollEnd, 1000)

        function isScrollEnd() {
          t2 = $(window).scrollTop();
          if (t2 == t1) {
            clearTimeout(timer)
            //console.log("滚动停止", t2) // 这里处理
            document.getElementById('progressstatic').setAttribute("src", "https://2021.igem.org/wiki/images/8/88/T--SZPT-CHINA--progress_static.png");
          }
        }
      }




    })

  })

</script>
<script>
  window.onload = function () {
    testDiv = document.getElementById("bcbg");
    setTimeout(function () {
      $("#loadingHome").hide();
      $("#loading").hide();
    }, 1000);

  }
</script>
<script type="text/javascript">
  var testDiv;
  var divwidth;
  var divheight;
  var temp = 0;
  function addRect() {
    divwidth = testDiv.clientWidth;
    divheight = testDiv.offsetHeight;
    if (divheight <= 3460) {
      //divwidth += 1;
      divheight += 2;
      //testDiv.style.width = divwidth + "px";
      testDiv.style.height = divheight + "px";
      temp += 2;
      testDiv.style.margin = (0 - temp) + "px 0px 0px 0px";
      //console.log(divheight)
    }
  }

</script>
<script>

  function getScrollTop() {
    var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
    if (document.body) {
      bodyScrollTop = document.body.scrollTop;
    }
    if (document.documentElement) {
      documentScrollTop = document.documentElement.scrollTop;
    }
    scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
    return scrollTop;
  }
  //文档的总高度
  function getScrollHeight() {
    var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
    if (document.body) {
      bodyScrollHeight = document.body.scrollHeight;
    }
    if (document.documentElement) {
      documentScrollHeight = document.documentElement.scrollHeight;
    }
    scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
    return scrollHeight;
  }
  function getWindowHeight() {
    var windowHeight = 0;
    if (document.compatMode == "CSS1Compat") {
      windowHeight = document.documentElement.clientHeight;
    } else {
      windowHeight = document.body.clientHeight;
    }
    return windowHeight;
  }
  /**kid逐渐消失*/
  function dieout() {
    var oImg = document.getElementById("kid"); //获得图片obj
    var iAlpha = 60;//用来定义默认的图片的透明度
    die(oImg);
    var oTimer = null;
  }
  //定时器
  function changeOpacity(obj, iTarget, iAlpha) {
    var oTimer = null;
    clearInterval(oTimer);
    //关闭定时器
    var iSpeed = 0;
    //速度
    if (iAlpha < iTarget) {
      iSpeed = 15;
    } else {
      iSpeed = -15;
    };
    oTimer = setInterval(function () {
      if (iAlpha == iTarget) {
        clearInterval(oTimer);
      } else {
        iAlpha += iSpeed;
        //设置透明度
        obj.style.opacity = iAlpha / 100;
        obj.style.filter = "alpha(opacity=" + iAlpha + ")";
      };
    }, 700);

  }
  function die(oImg) {//逐渐消失
    iAlpha = 100;
    oImg.style.opacity = 1;//设置透明度
    oImg.style.filter = 'alpha(opacity=100)';//设置透明度 IE
    changeOpacity(oImg, 0, iAlpha);
  };
  var keyBottom = 1;
  window.onscroll = function () {

    if (getScrollTop() == 0) {
      //console.log('顶部')
    }
    if (getScrollTop() + getWindowHeight() >= getScrollHeight()) {
      if (keyBottom != 0) {
        keyBottom = 0;
        // console.log("已经到最底部了！!");
        var oImg1 = document.getElementById("bacteriadie"); //获得图片obj
        var iAlpha = 60;//用来定义默认的图片的透明度
        die(oImg1);
        var oTimer = null;
        //
        setTimeout(function () {

          var oImg2 = document.getElementById("bacteriacry"); //获得图片obj
          var iAlpha = 60;//用来定义默认的图片的透明度
          die(oImg2);
          var oTimer = null;
          //
        }, 100);
        setTimeout(function () {

          var oImg3 = document.getElementById("bacteriagreenafraid"); //获得图片obj
          var iAlpha = 60;//用来定义默认的图片的透明度
          die(oImg3);
          var oTimer = null;

        }, 2000);
        setTimeout(function () {

          //
          var oImg4 = document.getElementById("bacteriacrytop"); //获得图片obj
          var iAlpha = 60;//用来定义默认的图片的透明度
          die(oImg4);
          var oTimer = null;
          //
          var oImg5 = document.getElementById("bacteriagreen"); //获得图片obj
          var iAlpha = 60;//用来定义默认的图片的透明度
          die(oImg5);
          var oTimer = null;


        }, 5000);
        //
        //document.getElementById("progressstaticgreen").style.visibility = "hidden";
        var oImg6 = document.getElementById("progressstaticgreen"); //获得图片obj
        var iAlpha = 60;//用来定义默认的图片的透明度
        die(oImg6);
        var oTimer = null;

        setInterval(addRect, 0);

        //alert("你好，我是一个警告框！");
        //var div=document.getElementById("div");
        //div.style.width="100%";
        // div.style.height=2000+"px";   //注意获取的ID时img的ID
      }
    }
  };

</script>
<style>
  #sideMenu,
  #top_title,
  .patrollink,
  #firstHeading,
  #home_logo,
  #sideMenu {
    display: none;
  }

  #content {
    padding: 0px;
    width:
    margin-top: -7px;
    margin-left: 0px;
    border: none;
  }

  body,
  html {
    width: 1520px;
    height: 100%;
  }

  #bodyContent h1,
  #bodyContent h2,
  #bodyContent h3,
  #bodyContent h4,
  #bodyContent h5 {
    margin-bottom: 0px;
  }

  #bodyContent a[href ^="https://"],
  .link-https {
    padding-right: 25px;
  }
</style>
<style>
  #home_logo,
  #sideMenu {
    display: none;
  }

  #sideMenu,
  #top_title,
  .patrollink {
    display: none;
  }

  #content {
    margin-left: 0px;
    margin-top: -30px;
    padding: 0px;
    width: 1520px;
    line-height: 1;
    margin-bottom: 0px;
  }

  body {
    background-color: white;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  #bodyContent h1,
  #bodyContent h2,
  #bodyContent h3,
  #bodyContent h4,
  #bodyContent h5 {
    margin-bottom: 0px;
  }

  .judges-will-not-evaluate {
    border: 4px solid #e4dede;
    padding: 2% !important;
    width: 92% !important;
  }

  #globalWrapper {
    padding-bottom: 0
  }

  #HQ_page h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Copperplate", "Arial", serif;
    font-weight: 600;
    margin-left: 125px;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  #HQ_page {
    margin-bottom: 0px;
    padding-bottom: 0px;
  }

  #header {
    background: url(https://2020.igem.org/wiki/images/7/7f/T--Greatbay_SCIE--MenuBarBackground.png);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  #top_menu_inside #user_item {
    height: 14px;
  }

  html {
    height: calc(100% - 30px);
  }
</style>
<style>
  .loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 1520px;
    height: 100%;
    z-index: 99999999;
    background-color: #f8c8b2;
  }

  .loader img {
    position: relative;
    height: 350px;
    width: auto;
    left: 40%;
    top: 35%;
  }
</style>

<body style="margin-top:50px">

  <div id="loadingHome" class="loader">
    <img src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
  </div>


  <div style="width:1520px;height:970px;">
    <img src="https://2021.igem.org/wiki/images/9/9e/T--SZPT-CHINA--fire.gif" width=1520px height=940px
      style="z-index: 9999;position: absolute;margin-top:30px"></img>
  </div>

  <div style="background-color: #f07978;width:1520px;height: 15px"></div>
  <div style="background-color: #f2978b;width:1520px;height: 25px"></div>
  <div
    style="width:1520px;height:320px;background-color:#f2978b;margin-top:0px;color:white;text-align:center;margin-top:-10px">

    <p class="pContent" style="font-size: 220%; font-family:Chalkduster;text-align:center;margin-top:10px">Fire diaster
      is the four major cause of accidental</p>
    <p class="pContent" style="font-size: 220%; font-family:Chalkduster;text-align:center;padding:0px;margin-top:-5px;">
      injury.Moverover,more than 95% people had fatal</p>
    <p class="pContent" style="font-size: 220%; font-family:Chalkduster;text-align:center;margin-top:-5px;">burns around
      the word in developing country.</p>
    <img src="https://2021.igem.org/wiki/images/0/01/T--SZPT-CHINA--home_one.png" width="380px" height="130px"></img>
  </div>

  <div style="width:1520px;height:300px;background-color:#f6c4bc;margin-top:0px;color:white;text-align:center;">
    <div style=" display: flex;text-align:center;">
      <div style="margin-top:45px;text-align:center;margin-left:190px">
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px">During the burn
          treatment,bacterial</p>
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px">infection is the hardest
          part.More</p>
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px">pateint amputation or death
          because</p>
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px">of pathogenic infection.
        </p>
      </div>
      <img src="https://2021.igem.org/wiki/images/0/0e/T--SZPT-CHINA--home_two.png" width="680px" height="160px"
        style="margin-top:75px;margin-left:130px"></img>
    </div>
  </div>
  <div style="background-color: #fcdfc8;width: 1520px;height: 15px"></div>
  <div style="width:1520px;height:300px;background-color:#fcdfc8;margin-top:0px;color:white;text-align:center;">
    <div style=" display: flex;">
      <img src="https://2021.igem.org/wiki/images/4/41/T--SZPT-CHINA--home_five.png" width="220px" height="240px"
        style="margin-top:25px;margin-left:300px"></img>
      <div style="margin-left:400px">
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px;float:right"> One of the
          pathogentic</p><br>
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px;float:right">bacteria is
          pseudomonas</p><br>
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px;float:right">aeruginosa.It
          has a high</p><br>
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px;float:right">infection rate
          and fatality rate</p><br>
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px;float:right">get the
          attention of our team.</p>
      </div>
    </div>
  </div>
  <img src="https://2021.igem.org/wiki/images/4/4f/T--SZPT-CHINA--home_six.png" width="1520px;" height="420px"
    style=""></img>


  <div style="width:1520px;height:760px;background-color:#f8c8b2;margin-top:0px;color:white;">


    <div style=" display: flex;text-align:center;">
      <div style="margin-top:75px;text-align:center;margin-left:290px">
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px">However,as a treatment for
        </p>
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px">infection,antibiotics were
          of no use to</p>
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px">pseudomonas aeruginosa.For
          human,the</p>
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px">uncurable could increased
          financial
        </p>
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px">burden and physical pain
          chronically.</p>
      </div>
      <img src="https://2021.igem.org/wiki/images/c/c9/T--SZPT-CHINA--home_three.png" width="290px" height="240px"
        style="margin-top:75px;margin-left:170px"></img>
    </div>
    <div style=" display: flex;text-align:center;margin-top:20px">
      <img src="https://2021.igem.org/wiki/images/c/c6/T--SZPT-CHINA--home_four.png" width="380px" height="220px"
        style="margin-top:75px;margin-left:250px"></img>
      <div style="margin-top:75px;margin-left:0px;margin-right:180px">
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px;float:right;">This year,our
          team focus on burn</p>
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px;float:right">wound.we wanted
          to make an effect to</p>
        <p class="pContent" style="font-size: 190%; font-family:Chalkduster;margin-top:10px;float:right">help pateint in
          infection and wound repair.</p>
      </div>
    </div>
  </div>
  </div>
  <img src="https://2021.igem.org/wiki/images/6/60/T--SZPT-CHINA--home_seven.png" width="1520px" height="400px"></img>

  <div style="width:1520px;height:20px;background-color:#65bcd1;margin-top:0px;color:white;text-align:center;"></div>
  <div style="width:1520px;height:100px;background-color:#65bcd1;margin-top:0px;color:white;text-align:center;">
    <div>
      <img src="https://2021.igem.org/wiki/images/4/42/T--SZPT-CHINA--sponsors.png" style="height: 64px;" />
    </div>
    <div id="seaDiv" style="z-index: 999;position: absolute;margin-top:-200px;width:1520px">
      <img src='https://2021.igem.org/wiki/images/4/47/T--SZPT-CHINA--BC0725_1.png' id="bcbg"
        style="width:1520px;margin-top: 0px; opacity: 0.6;height:200px">
    </div>
  </div>
  <div style="z-index:999;position:absolute;margin-top:-2700px">
    <div>
      <!-- 40 60 -->
      <img id="progressstatic" class="box"
        src="https://2021.igem.org/wiki/images/8/88/T--SZPT-CHINA--progress_static.png" width="40px" height="60px"
        style="z-index: 999;position: absolute;margin-left: 1450px;margin-top: 70px;">
      <img src="https://2021.igem.org/wiki/images/7/7a/T--SZPT-CHINA--progressPNG.png" width="10px" height="2040px"
        style="margin-left:1470px;margin-top: 90px;z-index: 2;">
    </div>
  </div>

  <img id="progressstaticgreen" src="https://2021.igem.org/wiki/images/2/29/T--SZPT-CHINA--green.png" width="80px"
    height="80px" style="margin-left:1430px;margin-top: -620px;z-index: 999;position: absolute;">
  <div>
    <img id="backTop" src="https://2021.igem.org/wiki/images/c/c1/T--SZPT-CHINA--backTop.png" width="70px"
      height="100px" style="margin-left:1400px;margin-top: -300px;z-index: 999999999;position: absolute;">

    <img id="bacteriagreen" src="https://2021.igem.org/wiki/images/2/29/T--SZPT-CHINA--green.png" width="140px"
      height="200px" style="margin-left:1300px;margin-top: -2500px;z-index: 1;position: absolute;">

    <img id="bacteriacrytop" src="https://2021.igem.org/wiki/images/3/33/T--SZPT-CHINA--skin_cry.png" width="140px"
      height="140px" style="margin-left:1250px;margin-top: -2400px;z-index: 1;position: absolute;">

    <img id="bacteriagreenafraid" src="https://2021.igem.org/wiki/images/8/88/T--SZPT-CHINA--green_afraid.png"
      width="80px" height="100px" style="margin-left:250px;margin-top: -1300px;z-index: 1;position: absolute;">

    <img id="bacteriacry" src="https://2021.igem.org/wiki/images/3/33/T--SZPT-CHINA--skin_cry.png" width="100px"
      height="100px" style="margin-left:150px;margin-top: -700px;z-index: 1;position: absolute;">


    <img id="bacteriadie" src="https://2021.igem.org/wiki/images/3/3d/T--SZPT-CHINA--green_die.png" width="80px"
      height="80px" style="margin-left:1060px;margin-top: -340px;z-index: 1;position: absolute;">


  </div>
</body>


</html>
